/**
 * 代码库导入中
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Loading, Button, Balloon } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';
import { PROJECT_ADMIN_ROLES } from 'utils/constants.js';
import { access } from 'components/accessContainer/util';
import track from 'utils/track';
import intl from '../../../../../../../locale';

export default class ImportingPage extends React.Component {
  static propTypes = {
    stopImportProject: PropTypes.func,
    isStoppingImport: PropTypes.bool,
  };

  static defaultProps = {
    stopImportProject: () => {},
    isStoppingImport: false,
  };

  render() {
    const { role } = window.FORCE.pathResource;
    const isAdmin = access(PROJECT_ADMIN_ROLES, role);

    const { import_from_svn } = this.props.projectInfo;

    return (
      <div className="project-importing">
        <Loading />
        <div className="project-importing-placeholder">
          <img src="https://img.alicdn.com/tfs/TB1Ci5nmBr0gK0jSZFnXXbRRXXa-800-576.png" />
        </div>
        <div className="waiting-text">
          {import_from_svn
            ? intl.get({
                id: 'code-assets.projectFiles.containers.importing.TheTimeRequiredForImporting',
                defaultMessage:
                  '代码库导入中，SVN 库导入根据库大小预计耗时从几分钟至几小时不等，请耐心等待…',
              })
            : intl.get({
                id: 'code-assets.projectFiles.containers.importing.ItWillTakeSeveralMinutes',
                defaultMessage: '代码库导入中，预计耗时几分钟，请耐心等待…',
              })}
        </div>
        {isAdmin && (
          <div className="stop-import-btn">
            <Balloon.Tooltip
              align="b"
              trigger={
                <Button
                  type="normal"
                  warning
                  style={{ marginTop: 24 }}
                  onClick={() => {
                    this.props.stopImportProject();
                    track({
                      action: 'cancel_import',
                      page: 'Repo-Importing',
                      type: 'import by URL',
                      control: '',
                    });
                  }}
                >
                  {this.props.isStoppingImport ? (
                    <span>
                      <YunxiaoIcon type="loading-fill" />
                      {intl.get({
                        id: 'code-assets.projectFiles.containers.importing.TerminatingImport',
                        defaultMessage: '终止导入中',
                      })}
                    </span>
                  ) : (
                    intl.get({
                      id: 'code-assets.projectFiles.containers.importing.TerminateImport',
                      defaultMessage: '终止导入',
                    })
                  )}
                </Button>
              }
            >
              {intl.get({
                id: 'code-assets.projectFiles.containers.importing.ImportWillFailAfterClicking',
                defaultMessage: '点击后导入将会失败，请谨慎操作',
              })}
            </Balloon.Tooltip>
          </div>
        )}
      </div>
    );
  }
}
